<template>
  <div class="container">
    <el-card class="box-card header" style="height: 140px;margin-bottom: 10px">
      <el-form ref="form" :model="form" label-width="80px">
        <el-row type="flex">
          <!--        按照商品名称-->
          <el-col :span="4">
            <el-form-item label="商品名称">
              <el-input placeholder="请输入商品名称" v-model="form.positionName"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="创建人" v-model="form.createUser">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>


          <el-col :span="4">
            <el-form-item label="所在仓库">
              <el-select v-model="form.warehouseId" placeholder="请选择" @change="changeWarehouse">
                <el-option
                    v-for="item in wareHouseList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="所在库区" @change="changeWarehouseArea">
              <el-select v-model="form.warehouseAreaId" placeholder="请选择">
                <el-option
                    v-for="item in warehouseAreaList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="商品分类" @change="changePosition">
              <el-select v-model="form.warehouseAreaId" placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="货品状态">
              <el-select v-model="form.line" placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>


        <el-row type="flex">

          <el-col :span="8">
            <el-form-item label="创建时间">
              <el-date-picker
                  v-model="value2"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="8" :push="1">
            <el-form-item label="修改日期">
              <el-date-picker
                  v-model="value2"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4" :push="1">
            <el-form-item >
              <el-button type="primary" icon="el-icon-plus" plain @click="moreCondition">更多条件</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item >
              <el-button type="primary" icon="el-icon-search" plain @click="search">搜索商品</el-button>
            </el-form-item>
          </el-col>
        </el-row>




      </el-form>

    </el-card>
    <el-card class="box-card banner" style="height: 500px;margin-bottom: 10px">
      <el-row type="flex" style="border-bottom: 1px solid rgba(0,0,0,.4);">
        <el-col :span="3">
          <h4 style="text-align: center;color: deepskyblue">所在储位</h4>
        </el-col>
        <el-col :span="10">
          <h4 style="text-align: right;color: deepskyblue">商品信息</h4>
        </el-col>
        <el-col :span="10" :push="8" style="margin-left: 35px">
          <el-button type="primary" plain icon="el-icon-plus" style="position: relative; top: -4px;left: -9px">添加商品</el-button>

        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="3">
          <el-tabs tab-position="left" style="height: 200px;">
            <el-tab-pane v-for="item in positionList"  :label="item.positionName"></el-tab-pane>

          </el-tabs>
        </el-col>
        <el-col :span="20">
          <el-table
              :data="tableData"
              style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">

<!--                  商品基本信息-->
                  <el-row type="flex">
                    <el-col :span="6">
                      <el-form-item label="商品名称">
                        <span>{{ props.row.goodsName }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="商品 ID">
                        <span>{{ props.row.id }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="商品单位">
                        <span>{{ props.row.unit }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>

<!--                  商品价格信息-->
                  <el-row type="flex">
                    <el-col :span="6">
                      <el-form-item label="成本价">
                        <span>{{ props.row.goodsCostPrice}}</span>
                      </el-form-item>

                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="销售价">
                        <span>{{ props.row.goodsSalesPrice }}</span>
                      </el-form-item>

                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="按件销售">
                        <span>{{ props.row.isPiece==0?'是':'否' }}</span>
                      </el-form-item>

                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="按重量销售">
                        <span>{{ props.row.isWeight==0?'是':'否' }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>

<!--                  存储信息-->
                  <el-row type="flex">
                    <el-col :span="6">
                      <el-form-item label="所在仓库">
                        <span>{{ props.row.warehouseName}}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="所在库区">
                        <span>{{ props.row.warehouseAreaName }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="所在储位">
                        <span>{{ props.row.positionName }}</span>
                      </el-form-item>
                    </el-col>

                    <el-col :span="6">
                      <el-form-item label="商品状态">
                        <span>{{ props.row.line==0?'未入库':props.row.line==1?'入库':'正在使用' }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>

<!--                  人员信息-->
                  <el-row type="flex">
                    <el-col :span="6">
                      <el-form-item label="创建人">
                        <span>{{ props.row.createUserName }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="供应商">
                        <span>{{ props.row.supplierName }}</span>
                      </el-form-item>

                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="修改人">
                        <span>{{ props.row.lastUpdateUser }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="启用否">
                        <span>{{ props.row.status==0?'启用':'禁用' }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>



                  <el-row type="flex">
                    <el-col :span="6">
                      <el-form-item label="重量单位">
                        <span>{{ props.row.weightUnit }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="当前数量">
                        <span>{{ props.row.count }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="使用数量">
                        <span>{{ props.row.useCount }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="按件销售">
                        <span>{{ props.row.isPiece==0?'是':'否' }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>


                  <el-row type="flex">
                    <el-col :span="12">
                      <el-form-item label="创建时间">
                        <span>{{ props.row.createTime |dateFormat}}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="上次更新时间">
                        <span>{{ props.row.lastUpdateTime |dateFormat}}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
                label="商品 ID"
                prop="id">
            </el-table-column>
            <el-table-column
                label="商品名称"
                prop="goodsName">
            </el-table-column>
            <el-table-column
                label="创建人"
                prop="createUserName">
            </el-table-column>

            <el-table-column
                label="供应商"
                prop="supplierName">
            </el-table-column>

            <el-table-column
                label="商品状态"
                prop="line">
            </el-table-column>

            <el-table-column
                label="成本价"
                prop="goodsCostPrice">
            </el-table-column>

            <el-table-column
                label="销售价"
                prop="goodsSalesPrice">
            </el-table-column>

            <el-table-column
                fixed="right"
                label="操作"
                width="160">
              <template slot-scope="scope">
                <el-button  type="text" size="small">更多操作</el-button>
                <el-button type="text" size="small" >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row type="flex">
            <el-col :span="24" :push="14"><el-pagination
                background
                layout="prev, pager, next,sizes"
                :page-size="0"
                :page-sizes="[1]"
                :current-page="1"
                :total="10">
            </el-pagination></el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>

<!--    添加商品搜索框条件-->
    <el-dialog title="添加搜索条件" :visible.sync="showAddSearchGoods" :append-to-body="true" >
      <goods-search></goods-search>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import {getWarehouseList,getWarehouseArea,getPositionList,getGoodsByCondition} from "@/api";
import goodsSearch from "@/components/warehouse/goodsSearch";

export default {
  name: "goods",
  components:{goodsSearch},
  data(){
    return{
      tableData: [],
      warehouseId:null,
      warehouseAreaId:null,
      warehouseAreaList:[],
      positionList:[],
      wareHouseList:[],
      page:1,
      size:99,
      showAddSearchGoods:false,
      form:{
        positionName:'',
        goodsCostPrice:0,
        goodsSalesPrice:0,
        isPiece:0,
        isWeight:0,
        unit:'',
        createUser:'',
        costBegin:0,
        costEnd:0,
        salesBegin:0,
        salesEnd:0,
        status:0,
        count:0,
        useCount:0,
        beginCreateTime:'',
        endCreateTime:'',
        line:0,
        weightUnit:'',
        lastUpdateUser:'',
        lastUpdateTimeBegin:'',
        lastUpdateTimeEnd:'',
        supplier:'',
        goodsType:'',
        positionId:'',
        warehouseId:'',
        warehouseAreaId:''
      },
      obj:{},
    }
  },
  mounted() {
    getWarehouseList().then(resp=>{
      this.wareHouseList=resp.data.data;
      let objs =[];
      for (let i = 0; i < this.wareHouseList.length; i++) {
        let obj={
          value:this.wareHouseList[i].id,
          label:this.wareHouseList[i].warehouseName
        }
        objs.push(obj)
      }
      this.wareHouseList=objs;
      //设置当前选中的库区信息
      if (this.wareHouseList!=null&&this.wareHouseList.length>=1){
        this.form.warehouseId=resp.data.data[0].id
        this.loadingData();
      }

    })
    //获取条件信息
    this.$bus.$on("getSearchCondition",(obj)=>{
      this.obj=obj;
      //关闭对话框
      this.showAddSearchGoods=false;
    })
    /**
     * 初始化数据开始
     */
    axios({
      url:'http://localhost:8080/api/goods/findAll',
      method:'get',
      params:{
        page:this.page,
        size:this.size
      }
    }).then((resp)=>{
      if (resp.data.code==200) {
        this.tableData=resp.data.data
        this.$message({
          message:resp.data.msg,
          type:'success'
        })
      }
      else this.$message({
        message:resp.data.msg,
        type:'error'
      })
    })
    /**
     * 初始化数据结束
     */
  },
  methods:{
    changeWarehouse(){
      this.loadingData();
    },
    changeWarehouseArea(){

    },
    changePosition(){

    },
    //搜索商品
    search(){

    },
    moreCondition(){
      this.showAddSearchGoods=true;
    },
    //加载商品信息
    loaDingGoodsInfo(){
      getGoodsByCondition(this.form,this.page,this.size)
    },
    //重新加载下拉框数据
    loadingData(){
      //获取所有库区信息
      if (this.form.warehouseId!=null){
        getWarehouseArea(this.form.warehouseId).then(resp=>{
          let data = resp.data.data;
          if (data!=null&&data.length>=1){
            //封装数据
            let objs = [];
            for (let i = 0; i < data.length; i++) {
              let obj ={
                value:data[i].id,
                label:data[i].reservoirAreaName
              }
              objs.push(obj)
            }
            this.warehouseAreaList=objs;
            this.form.warehouseAreaId=data[0].id
            //查找储位信息
            if (data!=null&&data.length>=1)
            getPositionList(this.form.warehouseAreaId).then(resp=>{
              let positionData = resp.data.data;
              if (positionData!=null&&positionData.length>=1){
                let objs =[];
                for (let i = 0; i < positionData.length; i++) {
                  let obj ={
                    label:positionData[i].positionName,
                    value:positionData[i].id
                  }
                  objs.push(obj)
                }
                //设置当前选中的储位信息
                this.form.positionId=data[0].id
              }
            })
          }
          else {
            this.warehouseAreaList=null;
            this.form.warehouseAreaId=null
          }
        })
      }
    },
    //重新加载储位信息，商品分类信息
    loaDingPosition(){
      if (this.form.warehouseAreaId!=null){
        //加载储位信息
        getPositionList(this.form.warehouseAreaId).then(resp=>{
          let data = resp.data.data;
          if (data!=null&&data.length>=1){
            let objs =[];
            for (let i = 0; i < data.length; i++) {
              let obj ={
                value:data[i].id,
                label:data[i].positionName
              }
              objs.push(obj)
            }
            //加载储位信息
            this.positionList=objs;
            //设置当前储位信息
          }
          else {
            this.form.positionId=null;
            this.positionList=null;
            this.goodsList=null;
            this.total=0;
          }
        })
      }
      //清空储位信息，并清空商品信息
      else {
        this.form.positionId=null;
        this.positionList=null;
        this.goodsList=null;
        this.total=0;
      }
    }
  }
}
</script>

<style scoped>
.container{
  margin: 0px auto;
}
.header{
  height: 145px;
}
.banner{
  height: 500px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>